<template>
  <Scroll ref="scrollRef"
          :probe-type="3"
          class="index-list"
          @scroll="onScroll">
    <ul ref="groupRef">
      <li v-for="group in data"
          :key="group.id"
          class="group">
        <!-- 标题区域 -->
        <h2 class="title">{{ group.title }}</h2>

        <!-- 标题对应的歌手区域 -->
        <ul>
          <li
            v-for="item in group.list"
            :key="item.id"
            class="item"
            @click="onItemClick(item)">
            <img v-lazy="item.pic" class="avatar">
            <span class="name">{{ item.name }}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div v-show="fixedTitle"
         :style="fixedStyle"
         class="fixed">
      <div class="fixed-title">{{ fixedTitle }}</div>
    </div>
    <div class="shortcut"
         @touchstart.stop.prevent="onShortcutTouchStart"
         @touchmove.stop.prevent="onShortcutTouchMove"
         @touchend.stop.prevent
    >
      <ul>
        <li v-for="(item, index) in shortcutList"
            :key="item"
            :class="{'current':currentIndex === index}"
            :data-index="index"
            class="item">
          {{ item }}
        </li>
      </ul>
    </div>
  </Scroll>
</template>

<script>
import Scroll from '../base/scroll/Scroll'
import useFixed from './use-fixed'
import useShortcut from './use-shortcut'

export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  // vue3新增emits选项, 和现有的props选项类似
  // 这个选项用来定义一个组件可以向其父组件触发的事件(子 -> 父传递数据需要用到自定义事件)
  // [组件封装者向外(组件使用者)提供一个自定义事件]
  emits: ['select'],
  name: 'IndexList',
  components: { Scroll },
  setup (props, { emit }) {
    const {
      groupRef,
      onScroll,
      fixedTitle,
      fixedStyle,
      currentIndex
    } = useFixed(props)

    const {
      shortcutList,
      onShortcutTouchStart,
      scrollRef,
      onShortcutTouchMove
    } = useShortcut(props, groupRef)

    function onItemClick (item) {
      emit('select', item)
    }

    return {
      // fixed
      groupRef,
      onScroll,
      fixedTitle,
      fixedStyle,
      shortcutList,
      currentIndex,
      // shortcut
      onShortcutTouchStart,
      scrollRef,
      onShortcutTouchMove,
      onItemClick
    }
  }
}
</script>

<style lang="scss" scoped>
.index-list {
  background-color: $color-background;
  // 实现了滑动, 并且也实现了子绝互相效果
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .group {
    padding-bottom: 30px;

    .title {
      padding-left: 20px;
      background-color: $color-highlight-background;
      font-size: $font-size-small;
      height: 30px;
      line-height: 30px;
      color: hsla(0, 0%, 100%, .5)
    }

    .item {
      padding: 20px 0 0 30px;
      height: 50px;
      display: flex;
      align-items: center;

      .avatar {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        //vertical-align: middle;
      }

      .name {
        margin-left: 20px;
        font-size: $font-size-medium;
        color: hsla(0, 0%, 100%, .5);
      }
    }
  }

  .fixed {
    // 绝对行为有一个参照物 -- 拼爹型定位
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    .fixed-title {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: $font-size-small;
      color: $color-text-l;
      background-color: $color-highlight-background;
    }
  }

  .shortcut {
    position: absolute;
    // bug点, 给shortcut快捷入口设置了 z-index:99, 导致进入子路由的时候还是可以看到的
    //z-index: 99;
    right: 4px;
    // 实现了胶囊在父元素中垂直居中
    top: 50%;
    transform: translateY(-50%);
    padding: 20px 0;

    // 实现了胶囊的形状
    width: 20px;
    border-radius: 10px;

    text-align: center;
    font-family: Helvetica;
    background: rgba(0, 0, 0, .3);

    .item {
      padding: 3px;
      line-height: 1;
      font-size: $font-size-small;
      color: hsla(0, 0%, 100%, .5);

      // bug点,  了解 &.current 与 &:hover 区别
      // .item{ &.current {}}   --> .item.current{} 并集选择器
      // .item{ &:hover {}}     --> .item:hover{} 伪类选择器
      // 最终编译的CSS是一个并集选择器:   .item.current[data-v-0b1b04ac]
      // 必须是 item 类同时应用了.current类
      // 个人理解: 这里不一定要是使用并集选择器.
      //          经验证, 把current类与item类同级别层次, 也可以实现效果
      &.current {
        //color: $color-theme;
        color: $color-theme-red;
      }
    }

    //.current {
    //  color: $color-theme;
    //}
  }
}
</style>
